<template>
  <div class="file-edit page-miH page-bgBack" style="padding: 0">
    <!-- title -->
    <div>
      <PageHeader @back="goBack" subTitle="返回"> 薪资详情 </PageHeader>
    </div>

    <div style="padding: 24px 24px 0 24px">
      <div class="file-user">
        <a-row class="file-user-head" type="flex" align="middle">
          <a-col class="file-user-left mg_r20">
            <img v-if="!routerData.empPhoto" src="@/assets/img/moren.png" alt="加载失败" class="file-user-img" />
            <img v-if="routerData.empPhoto" :src="routerData.empPhoto" alt="加载失败" class="file-user-img" />
          </a-col>
          <a-col>
            <a-row class="pd_b10">
              <strong>{{ routerData.name }}</strong>
            </a-row>
            <!-- <a-row class="pd_b10">
              部门: {{ routerData.depName }}
              <a-divider type="vertical" />
              岗位:{{ routerData.positionName }}
            </a-row> -->
            <a-row type="flex" :gutter="24">
              <a-col>入职日期：{{ formatDate(Number(routerData.joinDate), "d") }}</a-col>
              <a-col>工作性质：{{ $store.state.enums.postTypeArr[routerData.postType - 1] }}</a-col>
              <a-col>员工状态：{{ ["试用", "正式"][routerData.formalType - 1] }}</a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- content-con -->
    <div v-for="(item, i) in detailData" :key="item.id + i" class="file-user-con">
      <a-row type="flex" align="middle" :gutter="[16, 16]">
        <a-col>
          <span class="round" />
        </a-col>
        <a-col>
          <span class="primary" style="cursor: default">{{ formatDate(Number(item.gmtCreate), "d") }}</span>
          <strong> {{ item.isFixed ? "定薪" : "调薪" }}</strong>
          <img :src="effectImg" v-if="item.isStart" style="width: 50px; margin-left: 5px" />
          <img :src="noEffectImg" v-else style="width: 50px; margin-left: 5px" />
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <span class="dir" />
        </a-col>
        <a-col>
          <a-table
            :pagination="false"
            :columns="item.columns"
            :data-source="item.dataSource"
            :row-key="(record, index) => index"
            :scroll="{ x: 800 }"
          >
            <template slot="effectTime" slot-scope="effectTime">
              {{ formatDate(Number(effectTime), "d") }}
            </template>
            <template slot="remark" slot-scope="remark">
              <a-tooltip trigger="hover" placement="bottom">
                <template slot="title">
                  {{ remark }}
                </template>
                <span class="look">查看</span>
              </a-tooltip>
            </template>
            <template slot="trainingSalarySum" slot-scope="text">
              <span class="look">{{ text }}</span>
            </template>
            <template slot="officialSalarySum" slot-scope="text">
              <span class="look">{{ text }}</span>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getSalaryDetail } from "@/api/wages/file";
const reasons = ["入职定薪", "转正", "晋升", "调动", "年中调薪", "年度调薪", "特别调薪", "其他"];
export default {
  name: "FileDetail",

  data() {
    return {
      currentPage: null,
      detailData: [],
      dataSource: [],
      routerData: {},
      reasons,
      effectImg: require("@/assets/img/wages/file/effect.png"),
      noEffectImg: require("@/assets/img/wages/file/noEffect.png")
    };
  },
  computed: {
    ...mapState(["hr"]),
    status() {
      return ["待入职", "入职", "待离职", "离职"][this.routerData.status - 1];
    },
    doWords() {
      return ["salaryPerformance", "mealSubsidy", "trafficSubsidy", "salaryBasic"];
    }
  },

  created() {
    this.routerData = { ...this.$route.query };
    this.currentPage = this.$route.query.currentPage;
    this.getDetail();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "/wages/file",
        query: {
          currentPage: this.currentPage
        }
      });
    },
    getDetail() {
      const data = {
        companyId: this.hr.companyId,
        empId: this.routerData.id
      };
      getSalaryDetail(data)
        .then(({ data }) => {
          this.init(data);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    init(data) {
      const arr = [];
      data.forEach((item, index) => {
        const dataSource = {};
        const columns = [];
        item.trainingList.forEach((item2, index2) => {
          if (index2 < item.trainingList.length - 1) {
            dataSource[`training${index2}`] = item2.amount;
            columns.push({
              title: `试用期${item2.itemName}`,
              dataIndex: `training${index2}`,
              key: `training${index2}`,
              width: 150,
              ellipsis: true
            });
          }
        });
        item.officialList.forEach((item2, index2) => {
          if (index2 < item.officialList.length - 1) {
            dataSource[`official${index2}`] = item2.amount;
            columns.push({
              title: `转正后${item2.itemName}`,
              dataIndex: `official${index2}`,
              key: `official${index2}`,
              width: 150,
              ellipsis: true
            });
          }
        });
        dataSource.reason = this.reasons[Number(item.reason)];
        columns.push({
          title: item.isFixed ? "定薪原因" : "调薪原因",
          dataIndex: "reason",
          key: "reason",
          width: 150,
          ellipsis: true
        });
        dataSource.remark = item.remark;
        columns.push({
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          width: 150,
          ellipsis: true
        });
        dataSource.officialSalarySum = item.officialSalarySum;
        dataSource.trainingSalarySum = item.trainingSalarySum;
        if (!item.isFixed) {
          dataSource.effectTime = item.effectTime;
          columns.push({
            title: "调薪生效时间",
            dataIndex: "effectTime",
            key: "effectTime",
            scopedSlots: { customRender: "effectTime" },
            width: 200,
            ellipsis: true
          });
          if (item.isOfficial) {
            columns.push({
              title: "调薪后正式工资总计",
              dataIndex: "officialSalarySum",
              key: "officialSalarySum",
              scopedSlots: { customRender: "officialSalarySum" },
              width: 200,
              fixed: "right",
              ellipsis: true
            });
          } else {
            columns.push({
              title: "调薪后试用期工资总计",
              dataIndex: "trainingSalarySum",
              key: "trainingSalarySum",
              scopedSlots: { customRender: "trainingSalarySum" },
              width: 200,
              fixed: "right",
              ellipsis: true
            });
            columns.push({
              title: "调薪后正式工资总计",
              dataIndex: "officialSalarySum",
              key: "officialSalarySum",
              scopedSlots: { customRender: "officialSalarySum" },
              width: 200,
              fixed: "right",
              ellipsis: true
            });
          }
        } else {
          columns.push({
            title: "试用期工资总计",
            dataIndex: "trainingSalarySum",
            key: "trainingSalarySum",
            scopedSlots: { customRender: "trainingSalarySum" },
            width: 200,
            fixed: "right",
            ellipsis: true
          });
          columns.push({
            title: "正式工资总计",
            dataIndex: "officialSalarySum",
            key: "officialSalarySum",
            scopedSlots: { customRender: "officialSalarySum" },
            width: 200,
            fixed: "right",
            ellipsis: true
          });
        }
        arr.push({
          columns,
          dataSource: [{ ...dataSource }],
          gmtCreate: item.gmtCreate,
          isFixed: item.isFixed,
          isStart: item.isStart
        });
      });
      this.detailData = arr;
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);

.file-edit {
  padding: 24px;
  .file-edit-title {
    margin-bottom: 24px;
    .title {
      flex: 1;
      text-align: center;
    }
  }

  .file-user {
    background: #fafafa;
    padding: 24px;
    .file-user-head {
      margin: 0 auto;
      margin-left: -0px;
      width: $body-width;
      .file-user-img {
        width: 60px;
      }
    }
    .file-user-left {
      text-align: right;
    }
  }
  .file-user-con {
    padding: 24px 24px 0 24px;
    // margin-top: 24px;
    .round {
      display: block;
      width: 10px;
      height: 10px;
      background: #ffffff;
      border: 2px solid var(--primary);
      border-radius: 100%;
    }
    .dir {
      display: inline-block;
      height: 100%;
      width: 10px;
      &::after {
        content: "";
        position: absolute;
        right: 50%;
        width: 2px;
        height: calc(100% - 16px);
        background-color: #ccc;
      }
    }
    .file-table {
      flex: 1;
    }
    .look {
      color: var(--primary);
      // cursor: pointer;
    }
  }
}
</style>
